<template>
  <ElFormItem
    :label="titleText(options, item)"
    :prop="[childIndex, 'value']"
    :rules="{
      required: item.isRequired === 'Y',
      message: '请选择',
      validator: validatorMessage,
      trigger: 'change',
    }"
    class="flex_column"
  >
    <p v-if="options.showDesc" class="desc f12 mb10">
      {{ options.description }}
    </p>
    <ElCheckboxGroup
      v-model="item.value"
      :disabled="type === 'view'"
      :max="options.multipleLimit || options.checkRange?.max || Infinity"
      :min="options.checkRange?.min || 0"
      @change="onChange"
    >
      <ElRow>
        <template v-for="check in item.itemOptResList" :key="check.optionName">
          <template v-if="check.show || check.show === undefined">
            <ElCol :span="24 / (options.optionCol || 1)" class="pre_wrap">
              <ElCheckbox
                v-if="check?.isOther === 'Y'"
                :label="check.optionName"
              >
                {{ check.optionName }}
                <ElInput
                  v-model="check.otherValue"
                  :disabled="type === 'view'"
                  class="other_input"
                />
              </ElCheckbox>
              <ElCheckbox v-else :label="check.optionName"
              >{{ check.optionName }}
              </ElCheckbox>
            </ElCol>
          </template>
        </template>
      </ElRow>
    </ElCheckboxGroup>
  </ElFormItem>
</template>

<script setup>
import { titleText } from "@/utils/common.js";
import {  ElCheckbox,  ElCheckboxGroup,  ElCol,  ElFormItem,  ElInput,  ElRow,} from "element-plus";
import { } from "vue";

//defineOptions({ name: "PCCheckbox" });

const { item, type, index, childIndex } = defineProps([
  "item",
  "type",
  "index",
  "childIndex",
]);
const emits = defineEmits(["change"]);
const { options } = JSON.parse(item.vformJson || "{}");
// 传递值改变后
const onChange = () => emits("change", item);
// 校验
const validatorMessage = (rule, value, callback) => {
  let length = value ? value.length : 0;
  if (item.isRequired === "Y") {
    if (length === 0) {
      callback(new Error("请选择"));
    } else {
      if (
        options.checkRange &&
        options.checkRange.min &&
        length < options.checkRange.min
      ) {
        callback(new Error(`选项不能少于${options.checkRange.min}个`));
      } else if (
        options.checkRange &&
        options.checkRange.max &&
        length > options.checkRange.max
      ) {
        callback(new Error(`选项不能大于${options.checkRange.max}个`));
      } else {
        callback();
      }
    }
  } else {
    callback();
  }
};
</script>
<style lang="less" scoped>
.column :deep(.van-field__control--custom) {
  flex-direction: column;
  align-items: self-start;

  .van-cell {
    padding: var(--van-cell-vertical-padding) 0;
  }
}
</style>